<template>
  <div>
    <el-button @click="render">渲染数据源</el-button>
    <el-button @click="setStyle">改样式</el-button>
    <el-button @click="clear">清空</el-button>
    <el-button @click="remove">移除</el-button>
  </div>
</template>

<script>
import mixins from '../mixins';
import Layer from '../../../map/sgmap/constant/Layer';
export default {
  name: 'RenderTool',
  props: {
    getTool: {
      type: Function,
      required: true
    }
  },
  mixins: [mixins],
  data() {
    return {
      renderInstance: null
    };
  },
  methods: {
    render() {
      var features = [];
      // polygon
      var polygonFeatures = turf.randomPolygon(1, {
        bbox: this.getTool('BaseMapTool').getBounds(),
        // eslint-disable-next-line camelcase
        max_radial_length: 0.1
      }).features;
      features = features.concat(
        polygonFeatures.map((feature) => {
          feature.properties.sourceType = 'Polygon';
          feature.properties['color'] = this.$MapUtils.RandomUtil.randomHexColor();
          feature.properties['opacity'] = 0.8;
          return feature;
        })
      );
      // line
      var lineFeatures = turf.randomLineString(3, {
        bbox: this.getTool('BaseMapTool').getBounds(),
        // eslint-disable-next-line camelcase
        max_length: 0.1
      }).features;
      features = features.concat(
        lineFeatures.map((feature) => {
          feature.properties.sourceType = 'LineString';
          feature.properties['color'] = this.$MapUtils.RandomUtil.randomHexColor();
          feature.properties['opacity'] = 1;
          feature.properties['width'] = 5;
          feature.properties[Layer.GlobalMarkLabelField] = 'LINE_' + this.$MapUtils.RandomUtil.randomUUID();
          return feature;
        })
      );
      // point;
      let pointFeatures = turf.randomPoint(2, {
        bbox: this.getTool('BaseMapTool').getBounds()
      }).features;
      features = features.concat(
        pointFeatures.map((feature) => {
          feature.properties.sourceType = 'Point';
          feature.properties['color'] = this.$MapUtils.RandomUtil.randomHexColor();
          feature.properties['opacity'] = 1;
          feature.properties['size'] = 10;
          return feature;
        })
      );
      // marker;
      let markerFeatures = turf.randomPoint(2, {
        bbox: this.getTool('BaseMapTool').getBounds()
      }).features;
      features = features.concat(
        markerFeatures.map((feature) => {
          feature.properties.sourceType = 'Marker';
          feature.properties['opacity'] = 1;
          feature.properties['icon'] = '1020010-3';
          feature.properties['iconSize'] = 1;
          feature.properties[Layer.GlobalMarkLabelField] = 'MARKER_' + this.$MapUtils.RandomUtil.randomUUID();
          return feature;
        })
      );
      this.renderInstance = this.getTool('RenderTool').render(features);
      console.log('renderInstance', this.renderInstance);
    },
    setStyle() {
      var style = {
        polygon: {
          layout: {},
          paint: {
            'fill-color': '#ff0000'
          }
        },
        linestring: {
          layout: { visibility: 'none' }
        },
        point: { layout: {}, paint: {} }
      };
      this.renderInstance.setStyle(style);
    },
    clear() {
      this.renderInstance.clear();
    },
    remove() {
      this.renderInstance.remove();
    }
  }
};
</script>

<style scoped></style>
